<template>
    <div>
        <yd-list v-if="complaints.list && complaints.list.length" theme="4">
            <yd-list-item v-for="item in complaints.list" :key="item.comp_id" @click.native="showDetail(item)">
                <img slot="img" :src="compImage(item)"/>
                <span slot="title">
                    <span>
                        {{ item.comp_content }}
                    </span>
                </span>
                <p slot="other">{{ item.comp_desc }}</p>
                <yd-list-other slot="other">
                    <div>
                        <span>{{ item.comp_dept }} </span>
                    </div>
                    <div>{{ item.comp_date }}</div>
                </yd-list-other>
            </yd-list-item>
        </yd-list>
        <div v-else>
            <p class="prompt">
                <span>没有内容</span>
            </p>
        </div>
        <yd-popup v-model="showComp" position="bottom" height="70%">
            <ui-complain :complain="compInfo"></ui-complain>
        </yd-popup>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            showComp: false,
            compInfo: {}
        }
    },
    created () {
        this.$store.dispatch('getComplaints', {channel: 2, resolve: (data) => {
            this.$store.commit('webar', {
                show: 'tabs',
                tabs: [
                    {name: '建议', label: '我的'},
                    {name: '建议公示', label: '公示'},
                    {name: '新的建议', label: '新的'}
                ]
            })
        }})
    },
    computed: {
        complaints () {
            return this.$store.getters.complaints
        }
    },
    methods: {
        compImage (item) {
            if(item && item.image_list && item.image_list[0]) {
                return item.image_list[0].url
            } else {
                return item.comp_finish ? 'assets/img/default/complaints_ok.jpg' : 'assets/img/default/complaints.jpg'
            }
        },
        showDetail (item) {
            this.showComp = true
            this.compInfo = item
        }
    }
}
</script>

<style scoped>
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
</style>
